<template>
  <div class="edit-page" >
    <TopBar ref="topBar" :backValue="backValue" :tabName="tabName">
      
    </TopBar>
    <div class="main">
        <div class="btns-status"  >
            <el-radio-group v-model="orderCheckStatus" @change="changeOrderStatus">
                <el-radio-button :label="item.value" v-for="(item,index) in orderStatus" :key="index">{{ item.name }}</el-radio-button>
            </el-radio-group>
        </div>
    <div v-if="orderCheckStatus==1">
        <div class="basic-information">
            <div class="to-display">
                <div class="form-title">
                    <img src="@/assets/images/form_title.png" alt="">
                </div>
                <div class="top-title">基本信息</div>
            </div>
            <div class="to-display to-wrap">
                <div class="to-display item-list">
                    <div class="item-title">推广者姓名：</div>
                    <div>{{personalData.referrerName||'-'}}</div>
                </div>
                <div class="to-display item-list">
                    <div class="item-title">推广者手机号：</div>
                    <div class="item-text">{{personalData.referrerPhone||'-'}}</div>
                </div>
                <div class="to-display item-list">
                    <div class="item-title">开通时间：</div>
                    <div class="item-text">{{personalData.openingTime||'-'}}</div>
                </div>
            </div>
        </div>
         <div class="basic-information">
            <div class="to-display">
                <div class="form-title">
                    <img src="@/assets/images/form_title.png" alt="">
                </div>
                <div class="top-title">推广信息</div>
            </div>
            <div class="to-display to-wrap">
                <div class="to-display item-list">
                    <div class="item-title">可提现佣金：</div>
                    <div>{{personalData.withdrawAmtCan||'0'}}</div>
                </div>
                <div class="to-display item-list">
                    <div class="item-title">在途佣金：</div>
                    <div class="item-text">{{personalData.withdrawAmtWay||'0'}}</div>
                </div>
                <div class="to-display item-list">
                    <div class="item-title">累计提现金额：</div>
                    <div class="item-text">{{personalData.withdrawAmtTotal||'0'}}</div>
                </div>
                <div class="to-display item-list">
                    <div class="item-title">推广人数：</div>
                    <div class="item-text">{{personalData.referrerNumber||'0'}}</div>
                </div>
            </div>
        </div>
    </div>
	<PromotionShop v-if="orderCheckStatus==2" :userId="userId"></PromotionShop>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted,toRefs,onActivated} from "vue"
import { useRoute,useRouter } from 'vue-router';
import UploadImg from '@/components/UploadImg/index.vue';
import TopBar from '@/components/Topbar/index.vue'
import PromotionShop from './components/PersonalPromotionShop.vue';
// import getRules from "@/validUtils";
// import {getProvinceCityArea} from '@/utils/area.js'
// import { useDistInfoStore } from '@/stores/dict.js'
import { closeTag } from '@/utils/globalWay'
import { personalParticulars } from '@/api/ExtensionManage'
const route = useRoute();
const orderStatus = ref([
	{name:'基础信息',value:1},
	{name:'推广商品',value:2},
])
const orderCheckStatus = ref(1);
const tabName = ref('个人详情');
const backValue = ref();
const state = reactive({
    personalData:{
        referrerName:"",
        referrerPhone:"",
        openingTime:"",
        withdrawAmtCan:"",
        withdrawAmtWay:"",
        withdrawAmtTotal:"",
        referrerNumber:"",
    },
    userId:route.query.userId
    
});
const cancelBack = () => {
    topBar.value.backHandle()
    // merchant.value.resetFields()
}
const changeOrderStatus = () => {

}

//组件挂载到节点上之前执行的函数
onBeforeMount(()=>{})

//组件挂载完成后执行的函数
onActivated(()=>{
    personalParticulars({id:route.query.id}).then(res=>{
        state.personalData = res
        console.log("werqrqrqrq",state.personalData,state.personalData.referrerName)
    })
})

//组件更新之前执行的函数
onBeforeUpdate(()=>{})

//组件更新完成之后执行的函数
onUpdated(()=>{})

//组件卸载之前执行的函数
onBeforeUnmount(()=>{})

//组件卸载完成后执行的函数
onUnmounted(()=>{})
const { personalData,userId } = toRefs(state)
</script>

<style lang="less" scoped>
    .edit-page{
        width: 100%;
        height: 100%;
        .main{
            // width: 1700px;
	    width: auto;
            height: calc(100% - 48px);
            padding: 16px 4px;
            overflow: auto;
            box-sizing: border-box;
             // 基础信息样式
        }
       
    }
  

    .btns-status{
        width: 100%;
    
        height: 32px;
        box-sizing: border-box;
        padding:0;
	padding-left: 12px;
    }
    :deep(.el-radio-button:first-child .el-radio-button__inner){
        border-left:1px solid #3480FF;
    }
    .basic-information{
        padding: 16px;
        margin: 16px;
        border-radius: 4px;
        background: rgba(245, 249, 255, 1);
        .to-display{
            display: flex;
        }
        .form-title{
            display: flex;
            justify-content: center;
            align-items: center;
            img{
                width: 14px;
                height: 14px;
                padding-right: 8px;
            }
        }
        .to-wrap{
            flex-wrap: wrap;
        }
        .item-list{
            width: 33%;
            margin-top: 16px;
            // padding-left:14px;
            box-sizing: border-box;
            font-size: 14px;
        }
        .item-title{
            width: 25%;
            text-align: right;
        }
        .item-text{
            line-height: 18px;
        }
        .top-title{
            font-size: 14rpx;
            font-weight: 600;
        }
    }
</style>